<template>
    <div class="wrapper">
        <mt-header title="资讯详情" class="no-bg" fixed>
            <mt-button icon="back" slot="left" @click="goback"></mt-button>
        </mt-header>
        <div class="content" v-show="info.title">
            <div class="news-title">{{info.title}}</div>
            <div class="news-info">
                <div>
                    <span>{{info.source}}</span><span>{{info.time}}</span>
                </div>
                <div class="read-time">本文长度为{{info.number}}字，预估阅读时间{{readTime}}分钟</div>
            </div>
            <div class="news-text" v-html="info.content"></div>
        </div>
        <div v-if="info.getDlbState" v-cloak>
            <getdlb :getDlbState="info.getDlbState" :duration="info.getDlbTime" v-show="isShow"></getdlb>
            <getdlb2 :getDlbState="info.getDlbState" :duration="info.getDlbTime" v-show="!isShow"></getdlb2>
        </div>
    </div>
</template>

<script>
import getdlb from "@/components/GetDLB/index"
import getdlb2 from "@/components/GetDLB2/index"
import { getNewsInfo,postNewsRead } from '@/api/api'
import { Toast } from 'mint-ui';
import { getSystemType } from '@/utils'
export default {
    data: function () {
        return {
            info:{},
            readTime:1,
            startTime:'',
            endTime:'',
            timeout:Function,
            isDone: false,

            isShow : true
        }
    },
    components:{
        getdlb,
        getdlb2
    },
    mounted(){
        this.getNewsDetail();
        if( getSystemType().version < 5 && getSystemType().type == 'android' ){
            this.isShow = false;
        }
    },
    methods: {
        getNewsDetail(){
            getNewsInfo({
                "newId":this.$route.query.newId
            }).then(res => {
                if( res.code == 200 ){
                    this.info = res.data;
                    this.$nextTick(() => {    // 数据渲染后显示圆环
                        this.readTime = (res.data.number<1500) ? 1 : Math.ceil(res.data.number/1500)   
                    })
                    if( res.data.readState == '0' ){
                        this.postStartTime();
                        this.countdown();       // 未读：开始倒计时
                    }
                }else{
                    Toast({
                        message: res.msg
                    });
                }
            })
        },
        goback(){
            this.$router.back();
            this.flag = false;    
            this.info = {};    //点击返回后先隐藏圆环且置空内容
        },
        postStartTime(){
            this.startTime = new Date().getTime()
            postNewsRead({
                "newId":this.$route.query.newId,
                "startTime": new Date().getTime()
            }) 
        },
        countdown(){
            this.timeout = window.setTimeout(() => {
                //到了阅读时间上限，自动提交结束时间  留在当前页面
                this.endTime = new Date().getTime();
                postNewsRead({
                    "newId":this.$route.query.newId,
                    "endTime": this.endTime
                }).then(res => {
                    if( res.code == 200 ){
                        window.clearTimeout(this.timeout);
                        this.isDone = true;
                    }
                })   
            }, this.info.readTime*1000);  //预估阅读后自动提交阅读结束时间
        }
    },
    beforeRouteLeave(to,from,next){
        // 离开详情页之前发送结束时间
        if( !this.isDone ){
            window.clearTimeout(this.timeout);
            this.endTime = new Date().getTime();
            postNewsRead({
                "newId":this.$route.query.newId,
                "endTime": this.endTime
            }) 
        }
        next()
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .content{
        padding:25px 15px;
        margin-top: 45px;
        .news-title{
            font-size:21px;
            font-weight:bold;
            color:#323232;
            line-height:27px;
        }
        .news-info{
            font-size:13px;
            color:#999999;
            padding-top:13px;
            padding-bottom:10px;
            span{
                &:last-child{
                    margin-left:30px;
                }
            }
            .read-time{
                border-bottom:1px solid #E6E6E6;
                text-align:center;
                padding-top:20px;
                padding-bottom:10px;
            }
        }
        .news-text{
            margin-top:15px;
            font-size:16px;
        }
    }
}  
</style>